import { useEffect, useState } from 'react'
import { getRoomData, roomcleanUp } from '@/request/api'
import styles from './room.module.scss'
import RoomType from '../BookingData/components/RoomType'
import {
  UserOutlined,
  DeleteFilled,
  ToolFilled
} from '@ant-design/icons';
import { message, Popconfirm, Button } from 'antd';

const RoomView: React.FC = () => {

  const [roomdata, setData] = useState([])
  const colors = ["#1abc9c", "yellow", "#bbbb07", "red"]
  useEffect(() => {
    getData()
  }, [])

  const getData = async () => {
    const { data, code } = await getRoomData()
    if (code == 0) setData(data)
  }

  const updateState = async (roomId: string) => {
    const { code } = await roomcleanUp(roomId)
    if (code == 0) {
      getData()
      message.success({ content: "修改成功！", duration: 3 })
    }
  }

  return (
    <div className={styles.roomBox}>
      {roomdata.map((item: roomDataType) => {
        return (
          <div className={styles.item} key={item.roomId} style={{ backgroundColor: colors[item.roomState] }}>

            {/* <div className={styles.state}><BulbFilled style={{ color: 'yellow', fontSize: '18px' }} /></div> */}
            <div className={styles.title}>
              <div>{item.roomId}-<RoomType type={item.roomType} /></div>
            </div>
            <div className={styles.icon}>
              <UserOutlined style={{ fontSize: '70px' }} />
            </div>
            <div className={styles.money}>￥{item.roomPrice}</div>
            {/* 房间打扫状态 */}
            {
              item.roomState == 2 ? 
              <Popconfirm
                title="房间清理"
                description={`确定${item.roomId}房间已经打扫完成？`}
                onConfirm={() => updateState(item.roomId)}
                okText="Yes"
                cancelText="No"
              >
                <Button type='primary' size='small' icon={<DeleteFilled />}></Button>
              </Popconfirm>
              : ''
            }
            {/* 房间维修状态 */}
            {
              item.roomState == 3 ? 
              <Popconfirm
                title="房间维修"
                description={`确定${item.roomId}房间已经维修完成？`}
                onConfirm={() => updateState(item.roomId)}
                okText="Yes"
                cancelText="No"
              >
                <Button type='primary' size='small' icon={<ToolFilled />}></Button>
              </Popconfirm>
              : ''
            }
          </div>
        )
      })}
    </div>
  )
}

export default RoomView